<template>
  <div class="gzl">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input
            v-model="search.key"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
        >
          <el-button type="primary" @click="onsubmit"
          >查询
          </el-button
          >
        </el-form-item
        >
      </el-form>
<!--      <el-button class="ebtn" type="warning" @click="orderadd()">新增维保</el-button>-->
    </div>
    <el-table class="table" stripe :data="tableData" style="width: 100%" height="580">
      <el-table-column type="index" label="序号" align="center" width="70"/>
      <el-table-column prop="applyTime" label="日期" align="center"/>
      <el-table-column prop="siteName" label="维修服务站" align="center"/>
      <el-table-column prop="userName" label="接收人" align="center"/>
      <el-table-column prop="type" label="类型" align="center">
        <template v-slot="scope">
          <span v-show="scope.row.type==20">站点 - 维护 - 工时申请</span>
          <span v-show="scope.row.type==21">站点 - 申请 - 产品申请</span>
          <span v-show="scope.row.type==22">站点 - 返件 - 返件审核</span>
          <span v-show="scope.row.type==23">站点 - 新增 - 新增审核</span>
          <span v-show="scope.row.type==24">站点 - 开票 - 开票审核</span>
          <span v-show="scope.row.type==25">站点 - 付款 - 付款审核</span>
        </template>
      </el-table-column>
      <el-table-column prop="shengheStatus" label="状态" align="center">
        <template v-slot="scope">
          <span v-show="scope.row.shengheStatus==1">待审核</span>
          <el-button v-if="scope.row.shengheStatus == 2" type="text" size="medium"
                     @click="getBOhui(scope.row.checkFolwId)">驳回
          </el-button>
<!--          <span v-show="scope.row.shengheStatus==2">驳回</span>-->
          <span v-show="scope.row.shengheStatus==3">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            v-show="scope.row.shengheStatus==1"
            @click=" examine(scope.row.id,scope.row.type,isDetail=1,scope.row.checkFolwId) "
          >审核
          </el-button>
          <el-button size="small" type="text" @click="examine(scope.row.id,scope.row.type,isDetail=2,scope.row.checkFolwId)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChangeqq"
        :page-count="total"
      ></el-pagination>
    </div>

    <el-dialog
      title="驳回详情"
      :visible.sync="dialogVisible_bohui"
      width="50%"
      :modal-append-to-body="false">
      <ul :data="bohuilist" class="bohuizujian">
        <li>
          <span>审核日期</span>
          <el-input v-model="bohuilist.checkTime" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>审核人</span>
          <el-input v-model="bohuilist.userName" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>驳回理由</span>
          <el-input v-model="bohuilist.bohuiReason" style="width: 70%;" disabled></el-input>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible_bohui = false">返 回</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {
      dialogVisible_bohui: false,
      bohuilist:{
        bohuiReason:"",
        checkTime:"",
        userName:"",
      },
      search: {key: "", start: "", end: ""},
      tableData: [{}],
      total: 1,
      current: 1,
      pagesize: 10,

    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    getBOhui(checkflowId) {
      this.dialogVisible_bohui = true
      axios("/JX_java/procurement/getCheckFlowDetails?checkFlowId=" + checkflowId).then((res) => {
        console.log(res)
        let relse = res.data.data
        this.bohuilist = relse
        console.log(this.bohuilist)
      })
    },

    examine(id, type, statue,checkFolwId) {
      // return
      if (type == 20){ //站点工时审核
        this.$router.push({
          path: "/ExaminManageGSSH", query: {
            id: id,
            type: type,
            statue: statue,
            checkFolwId: checkFolwId,
          }
        })
      }
      if (type == 21){ //站点产品审核
        this.$router.push({
          path: "/ExaminManageCPSH", query: {
            id: id,
            type: type,
            statue: statue,
            checkFolwId: checkFolwId,
          }
        })
      }
    },
    //时间格式化
    formatTime(data) {
      return data == null ? "" : data.substring(0, 10);
    },
    getList() {
      const json = {
        beginTime: this.search.start,
        endTime: this.search.end,
        key: this.search.key,
        pageNum: this.current,
        pageSize: this.pagesize,
      };
      axios
        .post(
          "/JX_java/afferSale/siteMain/getSiteMainList", json
        ).then((res) => {
        console.log(res.data.data, 11111111111111111111111111)
        const result = res.data.data.content;
        this.tableData = result
        this.total= res.data.data.totalPages
        console.log(this.tableData, 111111)
        // this.clientIdarr = result;
      });
    },
    handleCurrentChangeqq(e) {
      this.current = e
      this.getList();
    },
    chage(e) {
      if (e) {
        this.search.start = e[0];
        this.search.end = e[1];
      } else {
        this.search.start = "";
        this.search.end = "";
      }
    },
    onsubmit() {
      this.getList();
    },
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.siteId = JSON.parse(localStorage.getItem("listDataArr")).id
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.getList()
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {

  },
}
</script>
<style lang="scss" scoped>
.bohuizujian{
  display: flex;
  flex-wrap: wrap;
  li{
    width: 33%;
    padding-top: 10px;
    text-align: center;
    span{
      display: inline-block;
      width: 25%;
    }
  }
}

.gzl {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.table {
  margin-bottom: 20px;
}

.pgnt {
  text-align: center;
}

.demo-form-inline {
  display: inline-block;
}

.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ebtn {
  float: right;
  margin-right: 20px;
}
</style>
